<template>
  <div ref="appContainer" class="app-container">
    <PropTable
      :loading="loading"
      :show-search-form="true"
      :columns="baseColumns"
      :data="list"
      :total="total"
      @reset="reset"
      @on-submit="onSubmit"
    >
      <template #operation="{ row }">
        <el-button link type="primary" size="small" @click="active(row)">
          {{ row.enable ? '禁用' : '启用' }}
        </el-button>
      </template>
    </PropTable>
  </div>
</template>
<script lang="ts" setup name="comprehensive">
  import { columns } from './constants'
  import { getUserList, activeUserCommon } from '@/api/user'
  import { showMessage, showMessageConfirm } from '@/utils/element'
  const loading = ref(false)
  const appContainer = ref(null)
  let baseColumns = reactive(columns)

  const list = ref([])
  const total = ref(0)
  //获取列表信息
  const getList = (data) => {
    getUserList(data).then((res) => {
      console.log(res)
      list.value = res.records
      total.value = res.total
    })
  }
  const reset = () => {
    loading.value = true
    setTimeout(() => {
      loading.value = false
    }, 500)
  }
  onMounted(() => {
    baseColumns[0].value = ''
    searchData.value = { pageSize: 20, pageNum: 1 }
    // getList({ pageSize: 20, pageNum: 1 })
  })
  const searchData = ref({})
  const onSubmit = (val = {}) => {
    const data = JSON.parse(JSON.stringify(val))
    searchData.value = data
    getList(data)
    loading.value = true
    setTimeout(() => {
      loading.value = false
    }, 500)
  }
  //启用用户
  const active = (row) => {
    showMessageConfirm(
      '提示',
      `是否确认${row.enable ? '禁用' : '启用'}该用户?`,
      '确认',
      '取消',
      () => {
        activeUserCommon(row.id, !row.enable).then((res) => {
          if (res) {
            onSubmit(searchData.value)
            ElMessage({
              type: 'success',
              message: `${row.enable ? '禁用' : '启用'}该用户成功`,
            })
          }
        })
      },
      () => {},
    )
  }
</script>

<style scoped lang="scss">
  .custom {
    margin-bottom: 10px;
  }
  .footer {
    flex: 1;
    display: flex;
    padding: 16px;
    flex-direction: column;
    border-radius: 4px;
    overflow: hidden;
    background: white;
    box-shadow: 0 0 12px rgb(0 0 0 / 5%);
    min-height: 300px;
    .pagination {
      width: 100%;
      display: flex;
      justify-content: center;
      padding-top: 20px;
      box-sizing: border-box;
    }
  }
  .table {
    position: relative;
    flex: 1;
  }
  .zb-table {
    position: absolute;
    height: 100%;
  }
</style>
